<template>
  <view class="container">
    <!-- 轮播图 -->
    <swiper :autoplay="true" :interval="3000" :duration="1000" style="width: 750rpx; height: 500rpx">
      <swiper-item style="width: 100%; height: 100%">
        <image :src="img_url + obj.images" style="width: 100%; height: 100%" mode="aspectFill"></image>
      </swiper-item>
    </swiper>
    <view class="info">
      <!-- 标题-->
      <view class="title">{{ obj.title }}</view>
      <!-- 时间 -->
      <view style="display: flex; align-items: center; margin: 24rpx 0">
        <image src="../../static/myimg/a13.png" style="width: 32rpx; height: 32rpx" mode=""></image>
        <view style="font-weight: 500; font-size: 28rpx; color: #151515; padding-left: 16rpx">时间：{{ obj.acttime }}</view>
      </view>
      <!-- 地点 -->
      <view class="fl" style="align-items: center">
        <image src="../../static/myimg/a14.png" style="width: 32rpx; height: 32rpx" mode=""></image>
        <view style="font-weight: 500; font-size: 28rpx; color: #151515; flex: 1; padding-left: 16rpx">地点：{{ obj.address }}</view>
      </view>
      <!-- 分割线 -->
      <view style="width: 100%; height: 12rpx; background-color: #f8f8f8"></view>
    </view>
    <!-- 人数 -->
    <view style="width: 750rpx; height: 216rpx; background: #ffffff; box-sizing: border-box; padding: 36rpx 30rpx">
      <view style="display: flex; align-items: center; justify-content: space-between">
        <!-- 数量 -->
        <view>
          <image src="../../static/myimg/a12.png" style="width: 32rpx; height: 32rpx; vertical-align: middle" mode=""></image>
          <text style="font-weight: bold; font-size: 28rpx; color: #222222; padding-left: 16rpx">人数 {{ obj.join_num + '/' + obj.num }}</text>
        </view>
        <!-- 性别 -->
        <view style="display: flex; align-items: center">
          <view style="position: relative; top: 0; left: 0; margin-right: 8rpx">
            <image src="../../static/myimg/a11.png" style="width: 56rpx; height: 24rpx" mode=""></image>
            <view style="position: absolute; right: 10rpx; top: 10rpx; font-weight: 400; font-size: 20rpx; color: #ffffff">{{ obj.girl_num }}</view>
          </view>
          <view style="position: relative; top: 0; left: 0">
            <image src="../../static/myimg/a10.png" style="width: 56rpx; height: 24rpx" mode=""></image>
            <view style="position: absolute; right: 10rpx; top: 10rpx; font-weight: 400; font-size: 20rpx; color: #ffffff">{{ obj.male_num }}</view>
          </view>
        </view>
      </view>
      <!-- 头像展示 -->
      <image
        :src="img_url + item2.avatar"
        v-for="(item2, index) in obj.userlist"
        :key="index"
        style="width: 80rpx; height: 80rpx; margin-left: -20rpx; border-radius: 50%; margin-top: 32rpx"
        mode=""
      ></image>
      <image :src="img_url + item2.avatar" style="width: 80rpx; height: 80rpx; margin-left: -20rpx; margin-top: 32rpx" mode=""></image>
    </view>
    <!-- 分割线 -->
    <view style="width: 100%; height: 12rpx; background-color: #f8f8f8"></view>
    <!-- 发起者 -->
    <view style="padding: 0 30rpx">
      <view>
        <image src="../../static/dynamicimg/whitepeople.png" style="width: 36rpx; height: 36rpx; vertical-align: middle" mode=""></image>
        <text>发起者</text>
      </view>
      <view style="display: flex; align-items: center; justify-content: space-between; margin-top: 32rpx">
        <view @click="gouserhome">
          <image :src="img_url + obj.avatar" style="width: 80rpx; height: 80rpx; margin-right: 20rpx; border-radius: 50%; vertical-align: middle" mode=""></image>
          <text style="font-weight: bold; font-size: 28rpx; color: #222222">{{ obj.nickname }}</text>
        </view>
        <view
          @click="gosixin"
          style="
            width: 140rpx;
            height: 60rpx;
            background: #feff01;
            border-radius: 100rpx 100rpx 100rpx 100rpx;
            font-weight: 400;
            font-size: 28rpx;
            color: #151515;
            text-align: center;
            line-height: 60rpx;
          "
        >
          私信TA
        </view>
      </view>
    </view>
    <!-- 分割线 -->
    <view style="width: 100%; height: 12rpx; background-color: #f8f8f8"></view>
    <!-- 详情 -->
    <view style="padding: 32rpx 30rpx">
      <view style="font-weight: bold; font-size: 28rpx; color: #222222; margin-bottom: 32rpx">详情</view>
      <view style="font-weight: 500; font-size: 26rpx; color: #222222">
        {{ obj.content }}
      </view>
      <image
        :src="img_url + item"
        style="width: 200rpx; height: 200rpx; border-radius: 16rpx 16rpx 16rpx 16rpx; margin-left: 12rpx; margin-top: 24rpx"
        v-for="(item, index) in obj.details_images"
        :key="index"
        mode="aspectFill"
      ></image>
    </view>
    <!-- 温馨提示 -->
    <view style="padding: 32rpx 30rpx">
      <view style="display: flex; align-items: center">
        <image src="../../static/myimg/a17.png" style="width: 36rpx; height: 36rpx" mode=""></image>
        <view style="font-weight: bold; font-size: 28rpx; color: #222222">温馨提示</view>
      </view>
      <view>1、本次活动名额有限，先报先得。 2、报名成功后请按时参与，因特殊原因情况不能到场可提前联系发起者取消。</view>
    </view>
    <!-- 操作按钮 -->
    <view class="btngroup">
      <view class="baoming" v-if="obj.is_report == 0 && obj.is_entry == 0" @click="joinact">立即报名</view>
      <view v-if="obj.is_entry == 1" class="canyu">已参与</view>
      <view v-if="obj.is_report == 1 && obj.is_entry == 0" class="baoman">已爆满</view>
    </view>
  </view>
</template>

<script>
import dayjs from 'dayjs';
export default {
  data() {
    return {
      actid: '',
      obj: {},
      img_url: this.img_url
    };
  },
  onLoad(opt) {
    if (opt.id) {
      this.actid = opt.id;
    }
    this.getdetail();
  },
  methods: {
    // 私信
    gosixin() {
      uni.navigateTo({
        url: '/dynamic/sixin/sixin?id=' + this.obj.user_id
      });
    },
    // 加入活动
    async joinact() {
      const res = await this.http('/doings/entry', {
        doings_id: this.actid
      });
      console.log(res);
      if (res.code == 1) {
        uni.showToast({
          title: res.msg
        });
      }
      this.getdetail();
    },
    // 跳转到她人的主页
    gouserhome() {
      uni.navigateTo({
        url: '/dynamic/userhome/userhome?userid=' + this.obj.user_id
      });
    },
    //获取活动详情
    async getdetail() {
      const res = await this.http('/doings/details', {
        doings_id: this.actid
      });
      console.log(res);
      this.obj = res.data;
      this.obj.acttime = dayjs(this.obj.starttime * 1000).format('MM:DD hh:mm') + '-' + dayjs(this.obj.endtime * 1000).format('MM:DD hh:mm');
    }
  }
};
</script>

<style lang="scss">
.fl {
  display: flex;
  align-items: center;
}
.container {
  box-sizing: border-box;
  .info {
    box-sizing: border-box;
    width: 100%;
    padding: 32rpx 30rpx;
    border-radius: 30rpx 30rpx 0rpx 0rpx;
    .title {
      font-weight: 800;
      font-size: 30rpx;
      color: #151515;
    }
  }
  .btngroup {
    box-sizing: border-box;
    width: 750rpx;
    height: 156rpx;
    background: #ffffff;
    box-shadow: 0rpx -4rpx 12rpx 2rpx rgba(0, 0, 0, 0.12);
    padding: 8rpx 30rpx;
    .baoming {
      width: 690rpx;
      height: 80rpx;
      text-align: center;
      line-height: 80rpx;
      font-weight: bold;
      font-size: 32rpx;
      color: #151515;
      background: #feff01;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
    }
    .canyu {
      width: 690rpx;
      height: 80rpx;
      background: #cccfdb;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      font-weight: bold;
      font-size: 32rpx;
      color: #ffffff;
      line-height: 80rpx;
      text-align: center;
    }
    .baoman {
      width: 690rpx;
      height: 80rpx;
      background: #ff3742;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      font-weight: bold;
      font-size: 32rpx;
      color: #ffffff;
      line-height: 80rpx;
      text-align: center;
    }
  }
}
</style>
